<template>
    <div class="container">
        <div class="warp">
            <div class="left">
                <el-menu default-active="1-1" class="el-menu-vertical-demo">
                    <el-sub-menu index="1" @click="currentPage = 'myplaylist'">
                        <template #title>
                            <el-icon>
                                <Headset />
                            </el-icon>
                            <span>推荐</span>
                        </template>
                        <el-menu-item index="1-1">推荐歌手</el-menu-item>
                        <el-menu-item index="1-2">入驻歌手</el-menu-item>
                        <el-menu-item index="1-3">国语大全</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2" @click="currentPage = 'myplaylist'">
                        <template #title>
                            <el-icon>
                                <Headset />
                            </el-icon>
                            <span>华语</span>
                        </template>
                        <el-menu-item index="2-1">我喜欢的音乐</el-menu-item>
                        <el-menu-item index="2-2">dj的歌曲</el-menu-item>
                        <el-menu-item index="2-3">国语大全</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3" @click="currentPage = 'myplaylist'">
                        <template #title>
                            <el-icon>
                                <Headset />
                            </el-icon>
                            <span>欧美</span>
                        </template>
                        <el-menu-item index="3-1">我喜欢的音乐</el-menu-item>
                        <el-menu-item index="3-2">dj的歌曲</el-menu-item>
                        <el-menu-item index="3-3">国语大全</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
            <div class="right">
                <div class="content">
                    <ComNav title="入驻歌手" moreLink="/discover/playlist/" moreText="更多" :showIcon="false"
                        :hideBackground="true" />
                    <ComCardList :list="recommendList" :limit="10" />
                    <div class="gap"></div>
                    <ComNav title="热门歌手" moreLink="/discover/playlist/" moreText="更多" :showIcon="false"
                        :hideBackground="true" />
                    <ComCardList :list="recommendList" :limit="10" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ComNav from '../components/ComNav.vue'
import ComCardList from '../components/ComCardList.vue'
const recommendList = [
    {
        id: 1,
        name: '古典清香 I 我的茶馆里住着巴赫与肖邦',
        picUrl: 'http://p2.music.126.net/QcPJfzds8ejF1FPgBaXMTw==/109951163128461676.jpg?param=140y140',
        playCount: 33680000,
        hasIcon: false
    },
    {
        id: 2,
        name: '宝藏挖掘机|分享好音乐和金曲',
        picUrl: 'http://p2.music.126.net/whuiVDHL3a-OE8q4mcj5xA==/109951169484809780.jpg?param=140y140',
        playCount: 99810000,
        hasIcon: false
    },
    {
        id: 3,
        name: '欧美万评优质女声•萦绕耳畔忆于心间',
        picUrl: 'http://p2.music.126.net/ptx2Jf4PZl3oNLxv4NiADg==/109951164018765577.jpg?param=140y140',
        playCount: 40330000,
        hasIcon: false
    },
    {
        id: 4,
        name: '好妹妹乐队聊18岁：听见人生的第一次迷茫',
        picUrl: 'http://p2.music.126.net/6ICIS6VJ64gk9nYptGRTIg==/109951170984015005.jpg?param=140y140',
        playCount: 15950,
        hasIcon: true
    },
    {
        id: 5,
        name: '戳爷/黄老板/断眉/萌德/骚姆/比伯/烟卷',
        picUrl: 'http://p2.music.126.net/sOWvFHC7alSUXHxmsTr1bQ==/109951163610820733.jpg?param=140y140',
        playCount: 45790000,
        hasIcon: false
    },
    {
        id: 6,
        name: '不是惩罚，而是【看见】：我儿子让我在霸凌这堂课中恍然大悟',
        picUrl: 'http://p2.music.126.net/LUyh3T4skewjTYUab8k24Q==/109951170980235468.jpg?param=140y140',
        playCount: 1577,
        hasIcon: true
    },
    {
        id: 7,
        name: '助眠辑 | 自然音，伴灵动乐符萦绕耳畔',
        picUrl: 'http://p2.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140',
        playCount: 30200000,
        hasIcon: true
    },
    {
        id: 8,
        name: '唯一 (抖音DJ热播版)',
        picUrl: 'http://p1.music.126.net/EGrmZoSgGXAsMKq0Wwbhlg==/109951170614898959.jpg?param=140y140',
        playCount: 730000,
        hasIcon: true
    }
];
</script>

<style lang="scss" scoped>
.container {
    .warp {
        min-height: 700px;
        background: url(../assets/Singer/wrap2.png) repeat-y center 0;
        width: 980px;
        margin: 0 auto;
        background-color: #fff;
        border: 1px solid #d3d3d3;
        border-width: 0 1px;
        display: flex;

        .left {
            position: relative;
            float: left;
            width: 180px;
        }

        .right {
            float: right;
            width: 775px;

            .content {
                padding: 40px;

                .gap {
                    margin: 50px 0;
                }
            }
        }
    }
}
</style>